// function myarc(rx, ry, r, startAngle, endAngle, ctx, color,n=true) {
//     ctx.beginPath();
//     ctx.moveTo(rx, ry);
//     //顺时针
//     ctx.arc(rx, ry, r, Math.PI * 2 - startAngle, Math.PI * 2 - endAngle, n);
//     ctx.closePath();
//     ctx.fillStyle = "red";

//     if (color) {
//       ctx.fillStyle = color;
//     }
//     ctx.fill();
//    /*  ctx.lineWidth = 25; //设置或返回当前的线条宽度
//     ctx.stroke(); */ 
//   }
/**绘制圆环
 * @param {number} rx 圆心坐标横轴
 * @param {number} ry 圆心坐标纵轴
 * @param {number} r  半径
 * @param {number} startAngle 开始角度
 * @param {number} endAngle   结束角度
 * @param {*} ctx        canvas内容
 * @param {string} color      颜色
 */
function myarc(rx, ry, r, startAngle, endAngle, ctx, color) {
  ctx.save();
  ctx.lineWidth = r / 2;
  ctx.strokeStyle = color;
  ctx.beginPath();
  ctx.arc(rx, ry, 0.75 * r, startAngle, endAngle);
  ctx.stroke();
  ctx.restore();
}
/**绘制线条
 * @param {number} from  线条绘制期起点
 * @param {number} to    线条绘制结束点
 * @param {*} ctx   canvas的内容
 */
function myLine(from, to, ctx) {
  from.x = Math.ceil(from.x);
  from.y = Math.ceil(from.y);
  to.x = Math.ceil(to.x);
  to.y = Math.ceil(to.y);
  ctx.lineWidth = 1;
  ctx.strokeStyle = 'black';
  ctx.beginPath();
  ctx.moveTo(from.x, from.y);
  ctx.lineTo(to.x, to.y);
  ctx.stroke()
}
/**绘制图片
 * @param {string} url  图标地址
 * @param {number} x    图标坐标横轴
 * @param {number} y    图标坐标纵轴
 * @param {string} ctx  canvas的内容
 * @param {number} width 图标大小
 * @param {number} height 图标大小
 */
function myDrawImg(url, x, y, ctx, width, height) {
  let img = new Image()
  img.src = url;
  img.onload = function () {
    //在画布指定位置上绘制图片
    ctx.drawImage(img, x - width / 2, y - height / 2, width, height)
  }
}
/** 判断在圆弧内
 * @param {number} x  圆心坐标 x
 * @param {number} y  圆心坐标 y
 * @param {number} a  鼠标坐标点 x
 * @param {number} b  鼠标坐标点 y
 * @param {number} r  圆半径
 * @param {number} angel1 起始角度 
 * @param {number} angel2 结束角度
 * @param {number} index  圆弧序列号
 * @returns 圆弧序列号
 */
function inArc(x, y, a, b, r, angel1, angel2, index) {
  let distance = Math.sqrt((x - a) * (x - a) + (y - b) * (y - b));
  if (distance >= r || distance <= 0.5 * r) {
    return -1
  } else {
    // !与x轴的夹角 取值为-π到π  得到是弧度值 一个圆等于360弧度值 角度夹角是与x轴顺时针的夹角
    let angel = Math.atan2(y - b, x - a) * 180 / Math.PI;
    if (angel < 0) {
      angel += 360
    }

    if (angel >= angel1 && angel <= angel2) {
      return index
    } else {
      return -1
    }
  }
}
/** 绘制弧形菜单 
 * @param {*} num 弧形数量
 * @param {*} x   菜单所属位置坐标值横轴 
 * @param {*} y   菜单所属位置坐标值纵轴 
 * @param {*} r   半径
 * @param {*} iconList 菜单图标列表 
 * @param {fuction} callback 菜单回调
 */
function myArcMenu(num, x, y, r, iconList, callback, marker, colors) {
  let omain = document.getElementById('main')
  var c = document.getElementById("canvasmain");
  omain.style.width = 2 * r + 'px'
  omain.style.height = 2 * r + 'px'
  omain.style.left = x - r + 'px';
  omain.style.top = y - r + 'px';
  c.width = 2 * r;
  c.height = 2 * r;
  // !画布的坐标是相对画布容器的位置 
  let x1 = x;
  let y1 = y;
  x = r;
  y = r;
  var ctx = c.getContext("2d");
  let eventAngle = 2 * Math.PI / num;
  for (let i = 0; i < num; i++) {
    let startAngle = i * eventAngle;
    let endAngle = (i + 1) * eventAngle;
    let color = ''
    if (colors) {
      color = colors[i]
    } else {
      color = "rgb(212,226,231)"
    }
    myarc(x, y, r, startAngle, endAngle, ctx, color, false)

    let centerAngle = (startAngle + endAngle) / 2;
    let centerr = 0.75 * r;
    let imgx = x + centerr * Math.cos(Math.PI * 2 - centerAngle);
    let imgy = y + centerr * Math.sin(Math.PI * 2 - centerAngle);
    // !此处放在外面循环 会被画的圆覆盖
    // !myLine(from, to, ctx);/ 
    myDrawImg(iconList[i], imgx, imgy, ctx, 24, 24);
  }
  // !外侧循坏 避免被圆覆盖
  for (let i = 0; i < num; i++) {
    let startAngle = i * eventAngle;
    let endAngle = (i + 1) * eventAngle;
    let from = { x: x + r * Math.cos(Math.PI * 2 - startAngle), y: y + r * Math.sin(Math.PI * 2 - startAngle) };
    let to = { x: x + r * Math.cos(Math.PI * 2 - startAngle) / 2, y: y + r * Math.sin(Math.PI * 2 - startAngle) / 2 };
    myLine(from, to, ctx);
  }
  let time1 = new Date().getTime()
  let app = document.getElementById('app')
  app.onclick = function (evt) {
    
    let time2 = new Date().getTime()
    if (time2 - time1 <= 70) {
      return
    }
    let a = evt.clientX;
    let b = evt.clientY;
    let eventAngle = 360 / num;
    let imgIndx = -1
    for (let i = 0; i < num; i++) {
      let startAngle = i * eventAngle;
      let endAngle = (i + 1) * eventAngle;
      // !此处计算 ab用的是相对屏幕的尺寸 那么x1和y1也需相对屏幕尺寸
      let arcIndex = inArc(x1, y1, a, b, r, startAngle, endAngle, i)

      if (arcIndex >= 0) {
        // console.log(arcIndex, 164);
        imgIndx = arcIndex;
        // console.log(callback,166);
        if (callback) {
          callback(imgIndx, marker)
        }
        break
      }
    }
    let omain = document.getElementById('main')
    var c = document.getElementById("canvasmain");
    omain.style.left = -1000 + 'px';
    omain.style.top = -1000 + 'px';
    menuStatus =false;
  }

  //避免重复绑定
  // c.addEventListener("click",function(evt){
  //   let a = evt.clientX;
  //   let b = evt.clientY;
  //   let eventAngle = 360 / num;
  //   let imgIndx = -1
  //   for (let i = 0; i < num; i++) {
  //     let startAngle = i * eventAngle;
  //     let endAngle = (i + 1) * eventAngle;
  //     // !此处计算 ab用的是相对屏幕的尺寸 那么x1和y1也需相对屏幕尺寸
  //     let arcIndex = inArc(x1, y1, a, b, r, startAngle, endAngle, i)
  //     if (arcIndex >= 0) {
  //       imgIndx = arcIndex;
  //       if (callback) {
  //         callback(imgIndx,marker)
  //       }
  //       continue
  //     }
  //   }

  // })
}
/**绘制圆环
 * @param {number} rx 圆心坐标横轴
 * @param {number} ry 圆心坐标纵轴
 * @param {number} r  半径
 * @param {number} startAngle 开始角度
 * @param {number} endAngle   结束角度
 * @param {*} ctx        canvas内容
 * @param {string} color      颜色
 */
function myarc(rx, ry, r, startAngle, endAngle, ctx, color) {
  ctx.save();
  ctx.lineWidth = r / 2;
  ctx.strokeStyle = color;
  ctx.beginPath();
  ctx.arc(rx, ry, 0.75 * r, startAngle, endAngle);
  ctx.stroke();
  ctx.restore();
}
/**绘制线条
 * @param {number} from  线条绘制期起点
 * @param {number} to    线条绘制结束点
 * @param {*} ctx   canvas的内容
 */
function myLine(from, to, ctx) {
  from.x = Math.ceil(from.x);
  from.y = Math.ceil(from.y);
  to.x = Math.ceil(to.x);
  to.y = Math.ceil(to.y);
  ctx.lineWidth = 1;
  ctx.strokeStyle = 'black';
  ctx.beginPath();
  ctx.moveTo(from.x, from.y);
  ctx.lineTo(to.x, to.y);
  ctx.stroke()
}
/**绘制图片
 * @param {string} url  图标地址
 * @param {number} x    图标坐标横轴
 * @param {number} y    图标坐标纵轴
 * @param {string} ctx  canvas的内容
 * @param {number} width 图标大小
 * @param {number} height 图标大小
 */
function myDrawImg(url, x, y, ctx, width, height) {
  let img = new Image()
  img.src = url;
  img.onload = function () {
    //在画布指定位置上绘制图片
    ctx.drawImage(img, x - width / 2, y - height / 2, width, height)
  }
}
/** 判断在圆弧内
 * @param {number} x  圆心坐标 x
 * @param {number} y  圆心坐标 y
 * @param {number} a  鼠标坐标点 x
 * @param {number} b  鼠标坐标点 y
 * @param {number} r  圆半径
 * @param {number} angel1 起始角度 
 * @param {number} angel2 结束角度
 * @param {number} index  圆弧序列号
 * @returns 圆弧序列号
 */
//判断在哪个菜单区域 如：一个菜单分成六部分看他在哪个部分的位置
function inArc1(x, y, a, b, r) {
  let distance = Math.sqrt((x - a) * (x - a) + (y - b) * (y - b));
  if (distance >= r || distance <= 0.5 * r) {
    return -1
  } else {
    // !与x轴的夹角 取值为-π到π  得到是弧度值 一个圆等于360弧度值 角度夹角是与x轴顺时针的夹角
    let angel = Math.atan2(y - b, x - a) * 180 / Math.PI;
    if (angel < 0) {
      angel += 360
    }
    // console.log(angel,286);
    if (angel > 90 && angel < 270) {
      return 0
    } else {
      return 1
    }
  }
}
/** 绘制弧形菜单 
 * @param {*} num 弧形数量
 * @param {*} x   菜单所属位置坐标值横轴 
 * @param {*} y   菜单所属位置坐标值纵轴 
 * @param {*} r   半径
 * @param {*} iconList 菜单图标列表 
 * @param {fuction} callback 菜单回调
 */
function myArcMenu1(num, x, y, r, iconList, callback, infor) {
  let omain = document.getElementById('main')
  var c = document.getElementById("canvasmain");
  omain.style.width = 2 * r + 'px'
  omain.style.height = 2 * r + 'px'
  omain.style.left = x - r + 'px';
  omain.style.top = y - r + 'px';
  c.width = 2 * r;
  c.height = 2 * r;
  // !画布的坐标是相对画布容器的位置 
  let x1 = x;
  let y1 = y;
  x = r;
  y = r;
  var ctx = c.getContext("2d");
  let eventAngle = 2 * Math.PI / num;
  for (let i = 0; i < num + 1; i++) {
    let startAngle = i * eventAngle + Math.PI / 2;
    let endAngle = (i + 1) * eventAngle + Math.PI / 2;
    myarc(x, y, r, startAngle, endAngle, ctx, "rgb(212,226,231)", false)

    let centerAngle = (startAngle + endAngle) / 2;
    let centerr = 0.75 * r;
    let imgx = x + centerr * Math.cos(Math.PI * 2 - centerAngle);
    let imgy = y + centerr * Math.sin(Math.PI * 2 - centerAngle);
    // !此处放在外面循环 会被画的圆覆盖
    // !myLine(from, to, ctx);/ 
    myDrawImg(iconList[i], imgx, imgy, ctx, 24, 24);
  }
  // !外侧循坏 避免被圆覆盖
  for (let i = 0; i < num; i++) {
    let startAngle = i * eventAngle + Math.PI / 2;
    let from = { x: x + r * Math.cos(Math.PI * 2 - startAngle), y: y + r * Math.sin(Math.PI * 2 - startAngle) };
    let to = { x: x + r * Math.cos(Math.PI * 2 - startAngle) / 2, y: y + r * Math.sin(Math.PI * 2 - startAngle) / 2 };
    myLine(from, to, ctx);
  }

  let time1 = new Date().getTime()
  let app = document.getElementById('app')
  app.onclick = function (evt) {
    let time2 = new Date().getTime()
    if (time2 - time1 <= 70) {
      return
    }
    let a = evt.clientX;
    let b = evt.clientY;
    let arcIndex = inArc1(x1, y1, a, b, r)
    if (arcIndex >= 0) {
      if (callback) {
        console.log(arcIndex, 355);
        callback(arcIndex, infor)
      }
    }
    let omain = document.getElementById('main')
    var c = document.getElementById("canvasmain");
    omain.style.left = -1000 + 'px';
    omain.style.top = -1000 + 'px';
    menuStatus =false
  }
}

